<template>
  <div class="asideNav">
    <!-- <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
      <el-radio-button :label="false">展开</el-radio-button>
      <el-radio-button :label="true">收起</el-radio-button>
    </el-radio-group> -->
    <!-- 员工 -->
    <!-- {{ isCollapse }} -->
    <el-menu class="el-menu-vertical-demo" :router="true" style="border: 0;" @open="handleOpen" @close="handleClose"
      :collapse="isCollapse">
      <el-menu-item index="/employee/home">
        <img class="logo" src="../../assets/logo.jpg" alt="">
      </el-menu-item>
      <el-menu-item index="/employee/home" v-if="role === 'employee'">
        <i class="el-icon-s-home"></i>
        <span slot="title">首页</span>
      </el-menu-item>
      <el-menu-item index="/admin/home" v-else>
        <i class="el-icon-s-home"></i>
        <span slot="title">首页</span>
      </el-menu-item>
      <el-menu-item index="CustomManage">
        <i class="el-icon-s-custom"></i>
        <span slot="title">入住管理</span>
      </el-menu-item>
      <!-- <el-menu-item index="RoomManage">
        <i class="el-icon-office-building"></i>
        <span slot="title">房间类型</span>
      </el-menu-item> -->
      <el-submenu index="RoomManage">
        <template slot="title">
          <i class="el-icon-office-building"></i>
          <span>房间管理</span>
        </template>
        <el-menu-item index="RoomManage">
          <template slot="title">
            <i class="el-icon-office-building"></i>
            <span>房间管理</span>
          </template>
        </el-menu-item>
        <el-menu-item index="RoomSettings" v-if="role === 'admin'">
          <template slot="title">
            <i class="el-icon-school"></i>
            <span>房间类型</span>
          </template>
        </el-menu-item>
      </el-submenu>
      <!-- <el-menu-item index="MemberManage">
        <i class="el-icon-setting"></i>
        <span slot="title">会员管理</span>
      </el-menu-item> -->
      <el-submenu index="MemberManage">
        <template slot="title">
          <i class="el-icon-user-solid"></i>
          <span>会员管理</span>
        </template>
        <el-menu-item index="MemberManage">
          <template slot="title">
            <i class="el-icon-user-solid"></i>
            <span>会员管理</span>
          </template>
        </el-menu-item>
        <el-menu-item index="MemberSettings" v-if="role === 'admin'">
          <template slot="title">
            <i class="el-icon-setting"></i>
            <span>会员设置</span>
          </template>
        </el-menu-item>
      </el-submenu>
      <el-menu-item index="EmployeeManage" v-if="role === 'admin'">
        <i class="el-icon-user"></i>
        <span slot="title">员工管理</span>
      </el-menu-item>
      <el-menu-item index="CommentManage" v-if="role === 'admin'">
        <i class="el-icon-chat-dot-round"></i>
        <span slot="title">评论管理</span>
      </el-menu-item>
      <el-menu-item index="historyOrdersManage">
        <i class="el-icon-date"></i>
        <span slot="title">历史订单</span>
      </el-menu-item>
      <el-menu-item index="logManage" v-if="role === 'admin'">
        <i class="el-icon-document"></i>
        <span slot="title">日志管理</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: 'AsideNav',
  components: {
  },
  props: {
    isCollapse: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      role: 'employee',
      id: 2
    }
  },
  created() {
    if (this.$route.path.includes('/employee/')) {
      this.role = 'employee'
    } else if (this.$route.path.includes('/admin/')) {
      this.role = 'admin'
    }
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath)
    }
  }
}
</script>

<style lang="less" scoped>
.asideNav-box {
  display: flex;
  border-right: 1px solid #e3e3e3;
  height: 100vh;
}

.logo {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  /* 将图片变成圆形 */
  overflow: hidden;
  margin-left: 20px;
  /* 隐藏溢出的部分 */
  position: relative;
  left: 33px;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>
